<%--
  Created by IntelliJ IDEA.
  User: 付伊
  Date: 2024/2/21
  Time: 15:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmw" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>修改界面</title>
    <script>
        window.onload = function () {
            document.getElementById("file").onchange = function (event) {
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById("img").src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        }
    </script>
    <style>
        body {
            background-image: url("img/preview2.jpg");

            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /*设置页面高度为视口高度*/
            margin: 0;
            background-color: #e8f5e9;

        }

        .container {
            width: 400px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 5px;

        }

        /*      header h2 {
                  text-align: center; // 标题居中
              }*/

        form {
            display: flex;
            flex-direction: column;

        }

        .form-group {
            margin-bottom: 15px;

        }

        label {
            display: block;
            margin-bottom: 5px;

        }

        input[type="submit"] {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;


        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        input[type="text"], input[type="password"] {
            background-color: rgba(255, 255, 255, 0.8); /* 设置背景颜色为白色，透明度为50% */
        }

        /* 使性别选项显示在同一行 */
        .gender-group {
            display: flex;
            align-items: center;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.6); /* 白色背景，80%的透明度 */
        }

        .gender-group label,
        .gender-group input {
            margin-right: 10px; /* 调整间距 */
        }

        /* 美化籍贯选择下拉菜单 */
        select#nativePlace {
            width: 100%; /* 宽度调整为100%以填充容器 */
            padding: 8px; /* 增加内边距 */
            border-radius: 5px; /* 边框圆角 */
            border: 1px solid #ccc; /* 边框样式 */
            background-color: #f8f8f8; /* 背景色 */
            background-color: rgba(255, 255, 255, 0.35); /* 设置输入框背景色透明度 */
        }

        select#nativePlace:focus {
            outline: none; /* 移除焦点时的轮廓 */
            border-color: #4CAF50; /* 焦点时边框颜色 */
        }
    </style>

    <link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="container">
    <header>
        <h2>修改用户信息</h2>
    </header>
    <form action="UserServlet?type=update" method="post" enctype="multipart/form-data">>
        <input type="hidden" name="id" value="${user.id}">
        <fieldset>
            <legend>个人信息</legend>
            文件:<input type="file" name="file" id="file"><br/>
            <div style="text-align: center">
                <img src="${user.imgUrl}" width="100" height="100" style="border-radius: 50%;">
                <a href="DownloadServlet?imgUrl=${user.imgUrl}">下载</a>
            </div>
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" name="username" id="username" value="${user.username}" required>
                <span>${msg}</span> <!-- 添加一个span标签来显示提示 -->
            </div>
            <div class="form-group">
                <label>性别:</label>
                <div class="gender-group">
                    <input type="radio" name="sex" value='男'${user.sex eq "男"?"checked='checked'":""} id="male" required>
                    <label for="male">男</label>
                    <input type="radio" name="sex" value='女'${user.sex eq "女"?"checked='checked'":""} id="female">
                    <label for="female">女</label>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <div class="form-group">
                <input type="checkbox" name="hobbies"
                       value="听音乐" ${fmw:contains(user.hobbiesStr, "听音乐")?"checked='checked'":""} id="reading">
                <label for="reading">听音乐</label>
                <input type="checkbox" name="hobbies" value="打游戏"
                       ${fmw:contains(user.hobbiesStr, "打游戏")?"checked='checked'":""}id="swimming">
                <label for="swimming">打游戏</label>
                <input type="checkbox" name="hobbies"
                       value="学习" ${fmw:contains(user.hobbiesStr, "学习")?"checked='checked'":""} id="running">
                <label for="running">学习</label>
            </div>
        </fieldset>
        <div class="form-group">
            <label for="nativePlace">籍贯:</label>
            <select name="nativePlace" id="nativePlace" required>
                <option value='湖北'${user.nativePlace eq "湖北"?"selected='selected'":""}>湖北</option>
                <option value='广东'${user.nativePlace eq "广东"?"selected='selected'":""}>广东</option>
                <option value='广西'${user.nativePlace eq "广西"?"selected='selected'":""}>广西</option>
            </select>
        </div>
        <input type="submit" value="修改">
    </form>
</div>
</body>
</html>
